<!--作品详情界面-->
<template>
    <div>
        <!--        作品简介div-->
        <div style="width: 1250px;background-color: honeydew;margin: auto;margin-top: 20px;">
            <div style="text-align: left;position: absolute">
                <img :src="require('../img/'+bookList.pic)" style="width: 180px;height: 240px;">
            </div>
            <div style="width: 1000px;height: 100px;position: relative;margin-left: 200px">
                <div style="float:left;">
                    <h1 v-text="bookList.title">嫡长女她又飒又有钱</h1>
                </div>
                <div style="float:left;margin-left: 50px;margin-top: 10px"><h4>{{bookList.author}} 著</h4></div>
                <div style="float:right;margin-top: 20px"><p style="font-weight: bold;font-size: 20px">
                    总字数：{{bookList.word}}</p></div>
            </div>
            <!--展开收起-->
            <div style="margin-left: 200px">
                <p style="text-align: left">{{testList}}</p>
                <div style="text-align: right" @click="showDisplay = !showDisplay"><a style="text-decoration: none"
                                                                                      href="#">{{textSwitch}}</a></div>
                <div style="margin-top: 30px;text-align: left;">
                    <el-row>
                        <el-button type="danger" v-if="readState===0" round @click="read">免费阅读</el-button>
                        <el-button type="danger" round v-else-if="readState===1" @click="read">继续阅读</el-button>
                        <el-button type="primary" v-model="showShelf" v-if="showShelf===0" round
                                   @click="addSelf(bookList.id)">
                            加入书架
                        </el-button>
                        <el-button type="danger" v-model="showShelf" v-else-if="showShelf===1" round>已加入书架</el-button>
                    </el-row>
                </div>
                <div style="text-align: left;margin-left: -200px">
                    <el-button style="color: red;border-bottom: none;border-right:none;background-color: honeydew;"
                               @click="workinfo" @click.native="asd">作品信息
                    </el-button>
                    <el-button style="color: red;border-bottom: none;background-color: honeydew;margin-left: -10px"
                               @click="contents(bookList.id)">目录
                    </el-button>
                </div>
            </div>
        </div>
        <!--        作品信息目录div-->
        <div style="width: 1250px;height: 400px;background-color: honeydew;margin: auto;margin-top: 20px;">
            <div>
                <div>
                    <h2 class="divTestStyle">作品互动区</h2>
                    <hr>
                    <div class="size" style="margin-left: 25px">
                        <h2 style="text-align: left;">推荐票</h2>
                        <h1 style="color:#000;" v-text="bookList.recommend">0</h1>
                        <el-row style="margin-top: 50px;">
                            <el-button type="danger" round @click="interactive">投推荐票</el-button>
                        </el-row>
                    </div>
                    <div class="size" style="margin-left: 426px;margin-top: -252px">
                        <h2 style="text-align: left;">月票</h2>
                        <h1 style="color:#000;" v-text="bookList.up">0</h1>
                        <el-row style="margin-top: 50px;">
                            <el-button round class="el-icon-collection-tag" @click="up">投月票</el-button>
                        </el-row>
                    </div>
                    <div class="size" style="margin-left: 827px;margin-top: -252px">
                        <h2 style="text-align: left;">总票数</h2>
                        <h1 style="color:#000;">{{getHits}}</h1>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 1300px;height: 600px;margin-left: 300px;background-color: honeydew;">
            <h2 class="divTestStyle">同类推荐</h2>
            <div class="block" v-for="(i,index) in completeList" :key="index" style="margin-left: 20px;">
                <div style="padding-left: 10px;float: left">
                    <router-link :to="{path: '/workinfo', query: {id:i.id,category:i.category}}" @click.native="flush">
                        <el-image :src="require('../img/'+i.pic)" style="width: 120px;height: 150px;"/>
                    </router-link>
                </div>
                <div style="float:left;">
                    <div style="height: 30px"><span class="demonstration" v-text="i.title">默认</span></div>
                    <div style="height: 100px;width: 190px;"><span class="demonstration">{{recommend}}</span></div>
                    <div style="height: 30px;color: red"><span class="demonstration" v-text="i.author">默认</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "WorkInfo",
        data() {
            return {
                readState: null,
                showShelf: null,
                newDate: null,
                bookList: [],
                showDisplay: false,
                chapter_id: null,
                ShelfList: [],
                // 评论框
                displayList: [],
                completeList: {},
                text: '',
                textarea: '',
                dialogFormVisible: false,
                firstList:[],
                form: {
                    username: 'zhangsan',
                    password: '123'
                },
                formLabelWidth: '120px',
            }
        },
        // 页面加载时
        created() {
            var aData = new Date();
            this.newDate = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
            this.$http.post("nove/findById", {id: this.$route.query.id}).then(response => {
                this.bookList = response.data;
            })
            this.$http.post("nove/edit", {id: this.$route.query.id}).then(response => {
            })
            this.$http.post("nove/findByTag", {category: this.$route.query.category}).then(response => {
                this.completeList = response.data;
            })
            this.$http.post("shelf/findById", {
                id: this.$route.query.id,
                user_id: localStorage.getItem("id")
            }).then(response => {
                this.showShelf = response.data
            })
            this.$http.post("shelf/findBycpt", {
                novel_id: this.$route.query.id,
                user_id: localStorage.getItem("id")
            }).then(response => {
                this.ShelfList = response.data
            })
            this.$http.post("state/findById", {user_id: localStorage.getItem("id"),nove_id: this.$route.query.id}).then(response => {
                this.readState = response.data
            })

        },
        computed: {
            flush(){
              this.$router.go(0);
            },
            getHits() {
                var up = this.bookList.up;
                var re = this.bookList.recommend;
                return up + re;
            },
            recommend() {
                for (let i = 0; i < this.completeList.length; i++) {
                    if (this.completeList[i] != null) {
                        let content = this.completeList[i].content;
                        let end = content.substring(0, 30);
                        end += ".....";
                        return end;
                    }
                }
            },
            testList() {
                // 当数据不需要完全显示的时候
                if (this.showDisplay == false) {
                    let content = this.bookList.content
                    let end = content.substring(0, 80);
                    end += "...";
                    return end;
                } else {
                    return this.bookList.content;
                }
            },
            textSwitch() {
                // 文字进行处理
                if (this.showDisplay == false) {
                    return '∨展开'
                } else {
                    return '∧收起'
                }
            },
            hits() {
                let hit_month = this.bookList.hits_month
                let a = hit_month + hit_month + hit_month
                return a;
            }

        },
        methods: {
            asd(){
                this.$router.go(0);
            },
            up() {
                var up = this.bookList.up + 1;
                if (sessionStorage.getItem("token") === null) {
                    this.$message({
                        type: 'success',
                        message: '您还没有登陆不能投票哦!'
                    })
                } else {
                    this.$http.post("user/findById", {id: localStorage.getItem("id")}).then(response => {
                        if (response.data.up === 0) {
                            this.$message({
                                type: 'success',
                                message: '亲爱的小主,您的月票投完啦!等待刷新哦~'
                            })
                        } else {
                            this.$http.post("nove/up", {
                                id: this.bookList.id,
                                up: up,
                                uid: localStorage.getItem("id")
                            }).then(response => {
                                if (response.data === 1) {
                                    this.$message({
                                        type: 'success',
                                        message: '亲爱的小主,投票成功!感谢支持.'
                                    })
                                    location.reload()
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: '亲爱的小主,投票失败!请检查网络.'
                                    })
                                    location.reload()
                                }
                            })
                        }
                    })
                }
            },
            // 推荐票点击+1
            interactive() {
                var re = this.bookList.recommend + 1;
                if (sessionStorage.getItem("token") === null) {
                    this.$message({
                        type: 'success',
                        message: '您还没有登陆不能投票哦!'
                    })
                } else {
                    this.$http.post("user/findById", {id: localStorage.getItem("id")}).then(response => {
                        if (response.data.recommend === 0) {
                            this.$message({
                                type: 'success',
                                message: '亲爱的小主,您的推荐票投完啦!等待刷新哦~'
                            })
                        } else {
                            this.$http.post("nove/recommend", {
                                id: this.bookList.id,
                                recommend: re,
                                uid: localStorage.getItem("id")
                            }).then(response => {
                                if (response.data === 1) {
                                    this.$message({
                                        type: 'success',
                                        message: '亲爱的小主,投票成功!感谢支持.'
                                    })
                                    location.reload()
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: '亲爱的小主,投票失败!请检查网络.'
                                    })
                                    location.reload()
                                }
                            })
                        }
                    })
                }

            },
            workinfo() {
                this.$router.replace({
                    name: 'workinfo',
                    query: {id: this.bookList.id,category:this.bookList.category}
                })
            },
            contents(id) {
                this.$router.replace({
                    name: 'contents',
                    params: {id: id}
                })
            },
            read() {
                if (sessionStorage.getItem("token") === null) {
                    this.$http.post("chapter/firstList",{novel_id:this.bookList.id}).then(response=> {
                        this.firstList=response.data;
                    })
                    this.$router.replace({
                        name: 'read',
                        query: {id: this.$route.query.id, pageNum: this.firstList.cid}
                    })
                } else {
                    if (this.readState === 1) {
                        this.$http.post("state/findByOrder", {
                            user_id: localStorage.getItem("id"),
                            nove_id: this.bookList.id
                        }).then(response => {
                            var cid = response.data.cid
                            this.$router.replace({
                                name: 'read',
                                query: {id: this.bookList.id, pageNum: cid}
                            })
                        })
                    } else {
                        this.$http.post("chapter/firstList",{novel_id:this.bookList.id}).then(response=> {
                            this.firstList = response.data;
                            const list = {
                                user_id: localStorage.getItem("id"),
                                nove_id: this.bookList.id,
                                novel_chapter_id: this.firstList.id,
                                create_time: this.newDate
                            }
                            this.$http.post("state/save", list).then(response => {
                                if (response.status === 200) {
                                    this.$router.replace({
                                        name: 'read',
                                        query: {id: this.$route.query.id, pageNum: this.firstList.cid}
                                    })
                                } else {
                                    location.reload()
                                }
                            })
                        })

                    }
                }
            },
            addSelf(id) {
                if(sessionStorage.getItem("token")===null){
                    this.$notify({
                        title: '书架',
                        message: '您还没有登陆哦，小主',
                        type: 'warning'
                    });
                }else{
                    this.$http.post("shelf/findByUid", {
                        user_id: localStorage.getItem("id"),
                        novel_id: id
                    }).then(response => {
                        if (response.data === 0) {
                            this.$http.post("chapter/firstList",{novel_id:this.bookList.id}).then(response=> {
                                this.firstList=response.data;
                            })
                            const list = {
                                user_id: localStorage.getItem("id"),
                                novel_id: id,
                                chapter_id: this.firstList.id,
                                status: 1,
                                create_time: this.newDate,
                                update_time: this.newDate,
                            }
                            this.$http.post("shelf/save", list).then(response => {
                                if (response.status === 200) {
                                    this.$message({
                                        message: '亲爱的小主,小说已经添加到书架了~',
                                        type: 'success'
                                    });
                                    this.$router.replace({name: "workinfo", query: {id: id, tag: this.bookList.tag}})
                                } else {
                                    this.$message({
                                        message: '登陆失败,请检查网络',
                                        type: 'warning'
                                    });
                                    this.$router.replace({name: "workinfo", query: {id: id, tag: this.bookList.tag}})
                                }
                            })
                        } else {
                            this.$http.post("shelf/edit", {status: 1, id: this.ShelfList.id}).then(response => {
                                if (response.status === 200) {
                                    this.$message({
                                        message: '亲爱的小主,小说已经添加到书架了~',
                                        type: 'success'
                                    });
                                    location.reload()
                                } else {
                                    this.$message({
                                        message: '登陆失败,请检查网络',
                                        type: 'warning'
                                    });
                                }
                            })
                        }
                    })
                }
            }
        }
    }
</script>

<style>
    .divv {
        background-color: honeydew;
        margin: auto;
        margin-top: 20px;
        /*border: 1px solid black;*/
    }

    .divTestStyle {
        margin-left: -1100px;
    }

    .size {
        color: red;
        border: 1px solid lightgrey;
        width: 400px;
        height: 250px;
    }

    /*.pinglun{*/
    /*    color: red;*/
    /*    border: 1px solid lightgrey;*/
    /*    height: 400px;*/
    /*}*/
</style>

<style scoped>

</style>
